<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${novel==null ? '添加小说' : '修改小说'}">Title</title>
    <link rel="stylesheet" href="/res/css/share.css" type="text/css">
    <link rel="stylesheet" href="/res/css/bookcase.css" type="text/css">
    <link rel="stylesheet" href="/res/css/book.css" type="text/css">
    <link rel="stylesheet" href="/res/css/msgPop.css" type="text/css">
</head>
<body>
<div id="book">
    <div class="top">
        <div class="head">
            <img src="/res/img/logo.png" alt="" @click="goHome">
            <div class="head_txt">
                新书添加
            </div>
            <img src="/res/img/back.png" class="exit" alt="" @click="back">
            <a href="#" class="head_txt" style="float: right;" @click.exact="back">
                返回
            </a>
        </div>
    </div>
    <div class="content">
        <form method="post" th:action="${novel!=null ? '/book/update/' + novel.id : '/book/add'}"
              enctype="multipart/form-data" @submit="check()">
            <div class="left">
                <img :src="img" id="img" alt="" @click="file('file1')">
                <input id="img_up" class="file_btn" type="button" value="选择封面" @click="file('file1')"/>
                <input name="image" type="file" id="file1" @change="showImg" hidden="hidden">
            </div>
            <div class="right">
                <label>
                    <input name="name" type="text" placeholder="书名" v-model="name" class="text">
                </label>
                <label>
                    <input name="author" type="text" placeholder="作者" v-model="author" class="text"
                           style="margin-top: 10px">
                </label>
                <div class="file_div">
                    <input id="txt_up" class="file_btn" type="button" value="导入图书文件(.txt)" @click="file('file2')"/>
                    <input id="file2" name="src" type="file" value="2" placeholder="图书路径"
                           style="padding-left: 20px;padding-top: 8px;" hidden="hidden" @change="up_ok('txt_up')">
                </div>
                <textarea name="introduction" placeholder="内容简介" id="textarea" v-model="introduction"
                          style="padding-top: 5px;padding-left: 10px;"></textarea>
                <!--                <input name="introduction" value="" type="hidden">-->

                <input th:if="${novel!=null}" style="float: left;background: rgba(255,0,0,0.81)" type="button" class="btn" value="删除" @click="deleteBook">
                <input style="margin-right: 19%" type="submit" class="btn" value="保存">
            </div>
        </form>
    </div>
    <div class="bottom">
        <div class="copyright">
            <a href="#"> 版权所有©支持盗版 </a>
        </div>
    </div>


    <!--提示弹窗-->
    <div class="alert" v-show="msg !== ''">
        <div class="alert_con">
            <div class="alert_title">{{ msg }}</div>
        </div>
    </div>
</div>
<script src="/res/js/vue.js"></script>
<script src="/res/js/axios.min.js"></script>
<script>
    new Vue({
        el: "#book",
        data: {
            // localhost: "[[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #httpServletRequest.getServerPort()}]]",
            msg: "[[${msg != null ? msg : ''}]]",
            author: "[[${novel != null ? novel.author : ''}]]",
            name: "[[${novel != null ? novel.title : ''}]]",
            introduction: ""
        },
        computed: {
            img() {
                let img = "[[${novel != null ? novel.cover : ''}]]"
                if (img !== '') {
                    img = "/res/" + img
                } else {
                    img = "/res/img/加.png"
                }
                return img
            }
        },
        methods: {
            goHome() {
                location.href = "/"
            },
            back() {
                let key = "USERSESSION"
                const regex = new RegExp(`${key}=([^;]+)`);
                const match = document.cookie.match(regex);
                location.href = "/bookcase.html/" + match[1]
            },
            check() {
                if (this.author === '' || this.name === '') {
                    this.msg = "至少要输入书名和作者"
                    event.preventDefault();
                } else {
                }
            },
            up_ok(id) {
                document.getElementById(id).style.background="#17df4f"
                document.getElementById(id).value = "添加成功"
            },
            showImg() {
                //1 创建文件读取对象
                let reader = new FileReader();
                this.up_ok("img_up")

                //文件存储在file表单元素的files属性中，它是一个数组
                //没有返回值，但是读取完毕后，将读取结果存储在对象的result中
                let fil = document.getElementById("file1").files;
                reader.readAsDataURL(fil[0]);

                //当读取成功后触发
                reader.onload = function () {
                    document.getElementById("img").src = reader.result;
                    // document.getElementsByName('img_src')[0].value = reader.result;
                };
            },
            file(id) {
                document.getElementById(id).click()
            },
            deleteBook() {
                if (confirm("是否删除")) {
                    location.href="/book/delete/"+ "[[${novel!=null?novel.id:''}]]"
                }
            }
        },
        watch: {
            msg: {
                immediate: true,
                handler() {
                    setTimeout(() => {
                        this.msg = ''
                    }, 1000)
                }
            }
        }
    })
</script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '',
            introduction: '',
            novel: {
                id: '',
                name: '',
                author: '',
                introduction: '',
                img_src: '',
            }
        }

    })
</script>
</body>
</html>